<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <script src="./jquery-3.6.0.js">
    </script>
</head>

<body>
    <div>
        <img src="./img/u=1004059194,2519683259&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=1314756853,2115633260&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=1566730018,1601099178&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=1702958865,3639213435&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=2106474246,1283617636&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=2292255176,3935614502&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=2429047651,1027856901&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=3083490177,4087830236&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=3434365774,3342884301&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=350276792,1875185979&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=4141002640,702087177&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=4150176662,621307066&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=4162516202,2516917329&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=3538197929,2880883290&fm=26&fmt=auto&gp=0.webp" alt="">
        <img src="./img/u=2752444265,54101073&fm=26&fmt=auto&gp=0.webp" alt="">
    </div>
    <script>


        const img = document.getElementsByTagName("img");
        //获取DOM
        let heiarr = [0, 0];
        //用数组记录两列的高度
        img[0].style =
            `position: absolute;
                        width:500px;
                        heigth:auto;
                        top: 0px;
                        left: 0px;  
                        `
        img[1].style =
            `position: absolute;
                        width:500px;
                        heigth:auto;
                        top: 0px;
                        left: 520px;  
                        `
        //单独设置第一列的样式
        for (let i = 2; i < img.length; i++) {
            heiarr[i % 2] += img[i - 2].offsetHeight;
            //第一行图片的高度为第二行距离顶部的高度
            //把各列的高度记录下来
            if (i % 2 == 0) {
                //当能被2整除时设置为第1列。并添加样式
                
                img[i].style =
                `position: absolute;
                top: ${heiarr[0] + 10 * i}px;
                width:500px;
                heigth:auto;
                left: 0px;  
                `
            } else {
                //不能被2整除时设置为第2列。并添加样式
                img[i].style =
                `position: absolute;
                top: ${heiarr[1] + 10 * i}px;
                width:500px;
                heigth:auto;
                left: 520px;  
                `
            }
        }
    </script>
    <style>
        .cs {
            position: absolute;
            margin-left: 10px;
            top: 0;
            left: 0;
        }
    </style>
</body>

</html>